<template>
  <view class="leader-list-page">
    <view class="hero">
      <view class="hero-title">优选团长</view>
      <view class="hero-sub">覆盖社区·高评分·近距离服务</view>
      <view class="search sticky">
        <view class="search-wrap">
          <text class="icon">🔍</text>
          <input class="ipt" v-model.trim="keyword" placeholder="搜索团长/门店/地址" @confirm="reload" />
          <button class="btn" @tap="reload">搜索</button>
        </view>
      </view>
    </view>

    <scroll-view
      class="list"
      scroll-y
      @scrolltolower="loadMore"
      refresher-enabled
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
    >
      <!-- 骨架屏：首屏加载 -->
      <view v-if="loading && page===1">
        <view v-for="n in 6" :key="n" class="item skeleton">
          <view class="s-ava" />
          <view class="s-body">
            <view class="s-line w60" />
            <view class="s-line w40" />
            <view class="s-line w80" />
          </view>
        </view>
      </view>

      <!-- 列表卡片 -->
      <view v-for="it in list" :key="it.id" class="item" @tap="goDetail(it.id)">
        <uv-avatar :src="it.avatar" size="60" shape="round" custom-style="margin-right: 16rpx;" />
        <view class="meta">
          <view class="row1">
            <text class="name">{{ it.name }}</text>
            <view class="rate-box">
              <uv-rate :value="Number(it.rating)" disabled size="16" gutter="2" />
              <text class="rate-num">{{ Number(it.rating).toFixed(1) }}</text>
            </view>
          </view>
          <view class="row2">{{ it.store_name }}</view>
          <view class="row3">
            <text class="addr">{{ it.address }}</text>
            <view class="dist">
              <uv-tags :text="`${(it.distance/1000).toFixed(1)}km`" type="success" size="mini" plain custom-style="padding: 6rpx 14rpx;" />
            </view>
          </view>
        </view>
        <text class="arrow">›</text>
      </view>

      <view class="loadmore" v-if="!loading && hasMore"><text>上拉加载更多</text></view>
      <view class="empty" v-if="!loading && list.length===0">暂无团长</view>
    </scroll-view>
  </view>
</template>

<script setup>
// 中文注释：团长列表
import { ref, getCurrentInstance } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { leaderApi } from '@/api/index.js'

const { proxy } = getCurrentInstance()

const keyword = ref('')
const list = ref([])
const page = ref(1)
const pageSize = ref(10)
const loading = ref(false)
const hasMore = ref(true)
const refreshing = ref(false)

const fetchList = async () => {
  if (loading.value || !hasMore.value) return
  loading.value = true
  try {
    const params = { page: page.value, page_size: pageSize.value, keyword: keyword.value }
    const data = await leaderApi.getLeaderList(params)
    const items = (data && data.list) || []
    list.value = page.value === 1 ? items : [...list.value, ...items]
    hasMore.value = items.length === pageSize.value
    page.value++
  } catch (e) {
    proxy?.$showToast?.('加载失败')
  } finally {
    loading.value = false
    if (refreshing.value) {
      refreshing.value = false
    }
  }
}

const loadMore = () => fetchList()
const reload = () => { page.value = 1; hasMore.value = true; fetchList() }
const onRefresh = () => { if (!refreshing.value) { refreshing.value = true; page.value = 1; hasMore.value = true; fetchList() } }
const goDetail = (id) => proxy?.$navigateTo?.(`/pages/leader/detail?id=${id}`)

onLoad(() => fetchList())
</script>

<style scoped lang="scss">
.leader-list-page { min-height: 100vh; background: $uni-bg-color-grey; }
.hero { padding: 32rpx 24rpx 0; }
.hero-title { font-size: 40rpx; color: #1f2d3d; font-weight: 700; }
.hero-sub { margin-top: 6rpx; color: #6b7c93; font-size: 24rpx; }
.search.sticky { position: sticky; top: 0; z-index: 10; margin-top: 16rpx; }
.search-wrap { display: flex; align-items: center; gap: 12rpx; padding: 12rpx; background: rgba(255,255,255,0.92); backdrop-filter: saturate(180%) blur(8px); border-radius: 16rpx; box-shadow: 0 6rpx 18rpx rgba(0,0,0,0.04); border: 1rpx solid $uni-border-color; }
.icon { font-size: 28rpx; color: #8a93a1; }
.ipt { flex: 1; height: 68rpx; line-height: 68rpx; background: #f2f3f5; border-radius: 999rpx; padding: 0 22rpx; font-size: 28rpx; }
.btn { height: 68rpx; line-height: 68rpx; background: $uni-color-primary; color: #fff; border: none; border-radius: 999rpx; padding: 0 26rpx; }
.list { height: calc(100vh - 220rpx); padding: 16rpx; box-sizing: border-box; }

/* 骨架屏 */
.skeleton { background: #fff; border-radius: 16rpx; padding: 18rpx; margin-bottom: 16rpx; display: flex; align-items: center; box-shadow: 0 12rpx 32rpx rgba(0,0,0,0.06); }
.s-ava { width: 120rpx; height: 120rpx; border-radius: 50%; background: #eee; animation: shine 1.2s linear infinite; }
.s-body { flex: 1; margin-left: 16rpx; }
.s-line { height: 28rpx; background: #eee; border-radius: 8rpx; margin: 10rpx 0; animation: shine 1.2s linear infinite; }
.s-line.w60 { width: 60%; }
.s-line.w40 { width: 40%; }
.s-line.w80 { width: 80%; }
@keyframes shine { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } }

/* 列表卡片 */
.item { position: relative; display: flex; align-items: center; background: #fff; border-radius: 20rpx; padding: 18rpx 56rpx 18rpx 18rpx; margin-bottom: 16rpx; box-shadow: 0 12rpx 32rpx rgba(0,0,0,0.06); }
.item:active { transform: scale(0.996); transition: transform .08s ease; }
.meta { flex: 1; margin-left: 16rpx; min-width: 0; }
.row1 { display: flex; align-items: center; justify-content: space-between; }
.name { font-size: 30rpx; color: #222; font-weight: 700; }
.rate-box { display: flex; align-items: center; gap: 8rpx; }
.rate-num { font-size: 22rpx; color: $uni-color-primary; }
.row2 { margin-top: 6rpx; font-size: 26rpx; color: #5e6d82; }
.row3 { display: flex; align-items: center; justify-content: space-between; gap: 12rpx; margin-top: 10rpx; font-size: 24rpx; color: #909399; white-space: nowrap; }
.addr { flex: 1; padding-right: 10rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dist { flex-shrink: 0; }
.arrow { position: absolute; right: 16rpx; top: 50%; transform: translateY(-50%); color: #c0c4cc; font-size: 40rpx; line-height: 1; }
.loadmore { text-align: center; color: #909399; padding: 24rpx 0; }
.empty { text-align: center; color: #909399; padding: 100rpx 0; }
</style>
